<template>
    <div id="retrieve" class="clearfix">
        <app-header></app-header>
        <div class="retrieve_content">
            <div class="retrieve gt">
                <div class="zhuce">
                    <div class="title">找回密码</div>
                    <div class="form">
                    <input type="text" placeholder="账号（请输入手机号码）" class="account" v-model="phone">
                    <div class="QRcode_div clearfix">
                        <input type="text" placeholder="图形验证码" class="QR_code lf" v-model="imgCaptcha">
                        <div class="graphic gt" v-on:click="captcha" v-html="imgCap"></div>
                    </div>
                    <div class="note">
                        <input type="text" placeholder="短信验证码" class="note_code lf" v-model="smsCaptcha">
                        <div class="checkCode gt" v-on:click="checkCode">查看验证码</div>
                        <div class="verification gt" v-on:click="note_code">获取验证码</div>
                    </div>
                    <input type="password" placeholder="输入新密码" class="pwd" v-model="password">
                    <input type="password" placeholder="确认密码" class="confirmPwd" v-model="password2">
                    <div class="register_btn" v-on:click="retrieve_btn">完成</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import Header from './header'
import {getImgCaptcha,getSms,getSms_text,findPwd} from '../api/example.js'
export default {
    name: 'retrieve',
    data(){
        return{
            phone:"",
            imgCaptcha:"",//用户输入的图文验证码
            smsCaptcha:"",//用户输入的短信验证码
            password:"",
            password2:"",
            imgCap:"获取图形验证码", //图形码显示区域
        }
    },
    components:{
        'app-header':Header,
    },
    methods:{
        // 判断是否登录
        judge:function(){
            if(localStorage.newstoken != 'undefined'){
                this.isShow=false
            }else{
                this.isShow=true
            }
        },
        // 获取图文验证码
        captcha:function(){
        var vm=this;
        getImgCaptcha().then(res => {
            vm.imgCap=res.data
        })
        .catch(err => {
            console.log(err)
        })
        },
        // 获取短信验证码
        note_code:function(){
        var vm=this;
        getSms(vm.phone,vm.imgCaptcha).then(res => {
            if(res.data.code === 'success'){
            console.log(res.data);
            alert(res.data.message)
            }else{
            alert('点击右侧按钮查看验证码')
            }
        })
            .catch(err => {
            //捕获错误
            console.log(err)
            })
        },
        // 查看短信验证码
        checkCode:function(){
        var vm=this;
        getSms_text(vm.phone).then(res => {
            if(res.data.code === 'success'){
            console.log(res.data.data.smsCaptcha);
            alert(res.data.data.smsCaptcha)
            }else{
            alert(res.data.message)
            }          
        })
            .catch(err => {
            //捕获错误
            console.log(err)
            })
        },
        // 完成按钮
        retrieve_btn:function(){
            var vm = this;
            if(this.password == this.password2){
                findPwd(vm.phone,vm.smsCaptcha,vm.password).then(res => {
                if(res.data.code === 'success'){
                    alert(res.data.message);
                }else{
                    alert(res.data.message)
                }
                })
                .catch(err =>{
                    console.log(err)
                })
            }
        }
    },
    mounted(){
        this.judge();
    }
}
</script>

<style scoped>
  #retrieve{
    width:100%;
  }
  .retrieve_content{
    height:860px;
    background: url(../assets/bg_sign.png) no-repeat 100% 100%;
    background-size: 100% 100%;
  }
  .retrieve{
    width:568px;
    background: rgba(255,255,255,0.24);
    box-shadow: 6px 6px 14px 5px rgba(39,52,101,0.08);
    margin-top: 107.8px;
    margin-right: 197.9px;
    padding-top: 44.2px;
  }
  .zhuce{
    width:380px;
    margin:0 auto;
  }
  .zhuce .title{
    font-size: 36px;
    color: #FFFFFF;
    text-align:center;
  }
  .form{
    margin-top: 35px;
  }
  .form input{
    width:380px;
    height:56px;
    line-height: 56px;
    font-size: 16px;
    color: #9B9B9B;
    border: 1px solid #FFFFFF;
    border-radius: 2px;
    padding-left: 20.2px;
    margin-bottom: 18px;
  }
  .QRcode_div input{
    width:228px;
  }
  .note input{
    width:174px;
  }
  .graphic,.verification,.checkCode{
    margin-left: 12.2px;
    width:90px;
    display: inline-block;
    height: 54.7px;
    line-height: 54.7px;
    text-align: center;
    cursor: pointer;
    background: #FF8000;
    font-size: 16px;
    color:#fff;
  }
  .graphic{
    width:139.8px;
    background: #f5f5f5;
    color:#FF8000;
  }
  .graphic svg{
    width:100%;
    height:100%;
    padding-left: 34px;
  }
  .register_btn{
    margin:24.3px 0 39.7px;
    background: #FF8000;
    height:53px;
    line-height: 53px;
    text-align:center;
    font-size: 20px;
    color: #FFFFFF;
    cursor: pointer;
  }
  .toLogin{
    border-top: 1px solid #fff;
    height:76.4px;
    line-height: 76.4px;
  }
  .toLogin span{
    margin-left: 19.7px;
    font-size: 14px;
    color:#fff;
  }
  .toLogin .login_btn{
    display: inline-block;
    height:41px;
    line-height: 41px;
    padding:0 13px;
    background: #fff;
    margin:18px 41px 0 0;
    font-size: 20px;
    color: #0D407E;
    cursor: pointer;
  }
</style>
